<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:s="http://www.sensap.eu/jsf"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:dialogs="http://java.sun.com/jsf/composite/components/dialogs"
	xmlns:widgets="http://java.sun.com/jsf/composite/components/widgets"
	xmlns:shiro="http://shiro.apache.org/tags">

<f:view contentType="text/html">

	<h:head>
		<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
		<h:outputStylesheet library="css" name="core.css" />
		<h:outputScript library="js" name="core.js" />
		<script src="http://maps.google.com/maps/api/js?sensor=false"
			type="text/javascript"></script>
		<title>#{messages.UI_SERVICE_DESIGNER_TITLE}</title>
	</h:head>

	<h:body styleClass="application-designer" id="body">
		<h:form id="util">
			<p:growl widgetVar="growl" escape="false" autoUpdate="true"
				showSummary="false" showDetail="true" sticky="true"
				severity="error,fatal" />
			<p:growl widgetVar="growl2" escape="false" autoUpdate="true"
				showSummary="false" showDetail="true" severity="info, warn"
				life="3000" />
			<p:poll process="@this" update="@this" interval="600"
				listener="#{applicationDesignPageController.keepAlivePing}" />
		</h:form>

		<pe:blockUI widgetVar="windowBlockUI"
			targetSelector=".application-designer">
			<span class="ui-icon-loader-big"></span>
		</pe:blockUI>


		<pe:layout id="pageLayout" stateCookie="true" fullPage="true">

			<!-- Menubar -->
			<pe:layoutPane position="north" size="42" closable="false"
				resizable="false"
				styleClassContent="no-border menubar-layout-container">
				<h:form id="menubar">
					<p:menubar autoDisplay="false">
						<p:submenu label="#{messages.UI_MENUBAR_FILE}"
							icon="ui-icon-document">
							<p:menuitem value="#{messages.UI_MENUBAR_FILE_NEW}"
								icon="ui-icon-plus" process="@this"
								update=":newApplicationDialog:newApplicationDialogForm"
								actionListener="#{applicationDesignPageController.prepareNewApplicationDialog()}"
								onclick="windowBlockUI.block();"
								onsuccess="windowBlockUI.unblock();newApplicationDialog.show();" />

							<p:submenu label="#{messages.UI_MENUBAR_FILE_OPEN}"
								rendered="#{! applicationDesignPageController.context.appManager.availableOAMOs.isEmpty()}"
								icon="ui-icon-folder-open">

								<c:forEach
									items="#{applicationDesignPageController.context.appManager.availableOAMOs}"
									var="entry">
									<p:menuitem value="#{entry.name}"
										actionListener="#{applicationDesignPageController.loadApplication(entry.name)}"
										process="@this" onclick="windowBlockUI.block();" ajax="false" />
								</c:forEach>

							</p:submenu>

							<p:separator />

							<p:menuitem value="#{messages.UI_MENUBAR_FILE_REFRESH}"
								icon="ui-icon-refresh"
								actionListener="#{applicationDesignPageController.reloadApplications()}"
								process="@this"
								update=":consoleForm, :nodeGraphForm :toolboxForm, :propertyGridForm, :menubar"
								onclick="windowBlockUI.block();"
								oncomplete="windowBlockUI.unblock();" />

							<p:separator />

							<p:menuitem value="#{messages.UI_MENUBAR_FILE_IMPORT}"
								icon="ui-icon-arrowthickstop-1-n" process="@this"
								actionListener="#{applicationDesignPageController.prepareImportApplicationsDialog()}"
								update=":importApplicationsDialog:importApplicationsDialogForm"
								onclick="windowBlockUI.block();"
								oncomplete="importApplicationsDialog.show();windowBlockUI.unblock();" />

							<p:menuitem value="#{messages.UI_MENUBAR_FILE_EXPORT}"
								icon="ui-icon-arrowthickstop-1-s"
								disabled="#{applicationDesignPageController.context.appManager.availableOAMOs.isEmpty()}"
								actionListener="#{applicationDesignPageController.exportApplications()}"
								process="@this, :consoleForm" ajax="false">
								<p:fileDownload
									value="#{applicationDesignPageController.context.exportedSpec}" />
							</p:menuitem>

						</p:submenu>

						<p:submenu label="#{messages.UI_MENUBAR_APP}" icon="ui-icon-gear">

							<p:menuitem value="#{messages.UI_MENUBAR_APP_CLEAR}"
								disabled="#{empty applicationDesignPageController.context.appManager.selectedOAMO}"
								icon="ui-icon-trash"
								onclick="confirmClearGraph.show();return false;" />

							<p:menuitem value="#{messages.UI_MENUBAR_APP_VALIDATE}"
								disabled="#{empty applicationDesignPageController.context.appManager.selectedOAMO}"
								icon="ui-icon-lightbulb" process="@this, :consoleForm"
								onclick="windowBlockUI.block();"
								actionListener="#{applicationDesignPageController.validateApplication()}"
								oncomplete="windowBlockUI.unblock();setTimeout(function(){if(codeMirror &amp;&amp; codeMirror.jq.is(':visible')){codeMirror.initialize();}},10);"
								update=":consoleForm" />

							<p:separator />

							<p:menuitem value="#{messages.UI_MENUBAR_APP_SAVE}"
								disabled="#{empty applicationDesignPageController.context.appManager.selectedOAMO}"
								icon="ui-icon-disk" process="@this, :consoleForm"
								actionListener="#{applicationDesignPageController.saveApplication()}"
								onclick="windowBlockUI.block();"
								oncomplete="windowBlockUI.unblock();"
								update=":consoleForm, :nodeGraphForm :toolboxForm, :propertyGridForm, :menubar" />

						</p:submenu>

						<f:facet name="options">
							<p:outputLabel value="#{messages.UI_MENUBAR_ACTIVE_APP}" />
							<p:button icon="ui-icon-document" style="margin-left:10px;"
								value="#{empty applicationDesignPageController.context.appManager.selectedOAMO ? '-' : applicationDesignPageController.context.appManager.selectedOAMO.name}"
								onclick="return false;" />

							<shiro:user>
								<p:commandButton icon="ui-icon-unlocked"
									style="margin-left:10px;"
									value="#{messages.UI_LOGIN_LOGOUT_BUTTON} (#{loginPageController.username})" process="@this"
									actionListener="#{loginPageController.handleLogout()}" />
							</shiro:user>	
						</f:facet>

					</p:menubar>
				</h:form>
			</pe:layoutPane>

			<!-- Toolbox -->
			<pe:layoutPane position="west" size="175" closable="false">
				<f:facet name="header">
					#{messages.UI_TOOLBOX}
				</f:facet>

				<h:form id="toolboxForm">
					<p:accordionPanel multiple="true" styleClass="toolbox"
						rendered="#{(! empty applicationDesignPageController.context.appManager.selectedOAMO)}">
						<c:forEach var="type"
							items="#{applicationDesignPageController.context.availableNodesByTypeMap.keySet()}">
							<p:tab titleStyleClass="ellipsis"
								disabled="#{empty applicationDesignPageController.context.appManager.selectedOAMO}">
								<f:facet name="title">
									#{messages['UI_NODE_GROUP_'.concat(type)]} (#{applicationDesignPageController.context.availableNodesByTypeMap[type].size()})
									
									<p:button rendered="#{type eq 'SOURCE'}"
										disabled="#{empty applicationDesignPageController.context.appManager.selectedOAMO}"
										icon="ui-icon-search"
										styleClass="ui-panel-titlebar-icon ui-corner-all find-sensor-button"
										style="display: inline-block; float: right; cursor: pointer;width:16px;height:16px;"
										onclick="findSensorDialog.show();return false;" />

								</f:facet>
								<h:dataTable var="entry"
									value="#{applicationDesignPageController.context.availableNodesByTypeMap[type]}"
									width="100%" style="box-sizing:border-box;"
									styleClass="table table-striped"
									rendered="#{! applicationDesignPageController.context.availableNodesByTypeMap[type].isEmpty()}">
									<h:column>
										<h:outputLink
											styleClass="insertable-node type_#{type}-#{entry.label}"
											onclick="return false;">
											<h:outputText escape="false"
												value="#{s:label1(messages, entry.label, 'UI_NODE_'.concat(entry.label))}" />
										</h:outputLink>
									</h:column>
								</h:dataTable>
							</p:tab>
						</c:forEach>
					</p:accordionPanel>
				</h:form>
			</pe:layoutPane>

			<pe:layoutPane position="center" styleClass="no-border">

				<!-- Nested layout:
                         - Node graph canvas (center)
                         - Property editor (east)
                         - Problems/Code viewer (south)
                    -->
				<!-- Main canvas -->
				<pe:layoutPane position="center">
					<h:form id="nodeGraphForm" styleClass="vbox-wrap">
						<s:nodeGraph id="nodeGraph"
							model="#{applicationDesignPageController.context.graphModel}"
							widgetVar="nodeGraph" styleClass="vbox-flex"
							translations="#{messages}">
							<p:ajax event="select"
								listener="#{applicationDesignPageController.onGraphNodeSelected()}"
								process="@this" update=":propertyGridForm" />
							<p:ajax event="deselect" process="@this"
								update=":propertyGridForm" />
							<p:ajax event="move" process="@this" />
							<p:ajax event="connect" process="@this" update="@this" />
							<p:ajax event="disconnect" process="@this" update="@this" />
							<p:ajax event="create" process="@this" update="@this"
								listener="#{applicationDesignPageController.onGraphNodeInserted}" />
							<p:ajax event="delete" process="@this"
								update="@this,:propertyGridForm"
								listener="#{applicationDesignPageController.onGraphNodeDeleted}" />
						</s:nodeGraph>
						<p:hotkey bind="del" handler="confirmDeleteNode.show();" />
					</h:form>
				</pe:layoutPane>

				<!-- Property grid -->
				<pe:layoutPane position="east" size="350"
					header="#{messages.UI_PROPERTY_GRID}" collapsible="true"
					resizable="true">
					<h:form id="propertyGridForm">
						<widgets:propertyGrid id="propertyGrid"
							graphModel="#{applicationDesignPageController.context.graphModel}" />
					</h:form>
				</pe:layoutPane>

				<pe:layoutPane position="south" size="250"
					header="#{messages.UI_CONSOLE}" collapsible="true" resizable="true"
					styleClass="no-border">

					<h:form id="consoleForm" styleClass="vbox-wrap">
						<p:tabView styleClass="vbox-wrap vbox-flex" dynamic="false"
							cache="false"
							activeIndex="#{applicationDesignPageController.context.selectedConsoleTabIndex}">

							<p:ajax event="tabChange" process="@this"
								oncomplete="setTimeout(function(){if(codeMirror &amp;&amp; codeMirror.jq.is(':visible')){codeMirror.initialize();}},10);" />

							<!-- Info -->
							<p:tab
								disabled="#{empty applicationDesignPageController.context.appManager.selectedOAMO}"
								title="#{messages.UI_CONSOLE_INFO_TAB}">
								<h:panelGrid columns="2" style="width:100%;"
									styleClass="table table-striped"
									columnClasses="no-wrap, full-available-width"
									rendered="#{! empty applicationDesignPageController.context.appManager.selectedOAMO}">
									<p:outputLabel style="font-weight:bold;"
										value="#{messages.UI_CONSOLE_INFO_TAB_NAME}" />
									<h:outputText escape="false"
										value="#{applicationDesignPageController.context.appManager.selectedOAMO.name}" />

									<p:outputLabel style="font-weight:bold;"
										value="#{messages.UI_CONSOLE_INFO_TAB_DESCR}" />
									<p:inputTextarea
										value="#{applicationDesignPageController.context.appManager.selectedOAMO.description}"
										style="width:98%;" rows="5" />

								</h:panelGrid>

							</p:tab>


							<!-- Problems -->

							<p:tab
								disabled="#{empty applicationDesignPageController.context.appManager.selectedOAMO}"
								title="#{s:message1(messages, 'UI_CONSOLE_PROBLEMS_TAB', applicationDesignPageController.context.graphValidationErrors.size())}">
								<p:outputPanel
									rendered="#{applicationDesignPageController.context.graphValidationErrors.isEmpty()}"
									styleClass="ui-empty-message">
									<p:outputLabel value="#{messages.UI_CONSOLE_NO_PROBLEMS}" />
								</p:outputPanel>

								<h:panelGrid columns="1" width="100%"
									styleClass="table table-striped"
									rendered="#{!(applicationDesignPageController.context.graphValidationErrors.isEmpty())}">
									<c:forEach var="issue"
										items="#{applicationDesignPageController.context.graphValidationErrors}">

										<h:outputLink
											onclick="nodeGraph.flash('#{issue.elementId}');return false;">
											<h:outputText escape="false"
												value="#{s:message1(messages, 'UI_CONSOLE_PROBLEM_'.concat(issue.type), s:label2(messages, issue.details, 'UI_NODE_PROPERTY_'.concat(issue.nodeClassName).concat('_').concat(issue.details), 'UI_NODE_PROPERTY_'.concat(issue.details)))}" />
										</h:outputLink>

									</c:forEach>
								</h:panelGrid>
							</p:tab>

							<!-- Warnings -->

							<p:tab
								disabled="#{empty applicationDesignPageController.context.appManager.selectedOAMO}"
								title="#{s:message1(messages, 'UI_CONSOLE_WARNINGS_TAB', applicationDesignPageController.context.graphValidationWarnings.size())}">
								<p:outputPanel
									rendered="#{applicationDesignPageController.context.graphValidationWarnings.isEmpty()}"
									styleClass="ui-empty-message">
									<p:outputLabel value="#{messages.UI_CONSOLE_NO_WARNINGS}" />
								</p:outputPanel>

								<h:panelGrid columns="1" width="100%"
									styleClass="table table-striped"
									rendered="#{!(applicationDesignPageController.context.graphValidationWarnings.isEmpty())}">
									<c:forEach var="issue"
										items="#{applicationDesignPageController.context.graphValidationWarnings}">

										<h:outputLink
											onclick="nodeGraph.flash('#{issue.elementId}');return false;">
											<h:outputText escape="false"
												value="#{s:message1(messages, 'UI_CONSOLE_WARNING_'.concat(issue.type), s:label2(messages, issue.details, 'UI_NODE_PROPERTY_'.concat(issue.nodeClassName).concat('_').concat(issue.details), 'UI_NODE_PROPERTY_'.concat(issue.details)))}" />
										</h:outputLink>
									</c:forEach>
								</h:panelGrid>
							</p:tab>

							<!-- Generated code -->

							<p:tab title="#{messages.UI_CONSOLE_CODE_VIEW_TAB}"
								disabled="#{empty applicationDesignPageController.context.appManager.selectedOAMO}">
								<pe:codeMirror id="codeMirror"
									value="#{applicationDesignPageController.context.generatedCode}"
									lineNumbers="true" readOnly="true" theme="eclipse"
									matchBrackets="true" mode="sparql" widgetVar="codeMirror" />
							</p:tab>

						</p:tabView>
					</h:form>

				</pe:layoutPane>

			</pe:layoutPane>

		</pe:layout>

		<h:form id="confirmDialogs">
			<p:confirmDialog header="#{messages.DIALOG_CONFIRM}" severity="alert"
				appendToBody="true" closeOnEscape="true"
				widgetVar="confirmClearGraph">

				<f:facet name="message">
					<h:outputText escape="false"
						value="#{messages.UI_CONFIRM_CLEAR_GRAPH}" />
				</f:facet>

				<p:commandButton value="#{messages.DIALOG_YES}" process="@this"
					actionListener="#{applicationDesignPageController.clearApplicationWorkspace()}"
					update=":consoleForm, :nodeGraphForm :toolboxForm, :propertyGridForm, :menubar"
					oncomplete="setTimeout(function(){if(codeMirror &amp;&amp; codeMirror.jq.is(':visible')){codeMirror.initialize();}},10);confirmClearGraph.hide();" />
				<p:commandButton value="#{messages.DIALOG_NO}"
					onclick="confirmClearGraph.hide();" type="button" />
			</p:confirmDialog>
			<p:confirmDialog header="#{messages.DIALOG_CONFIRM}" severity="alert"
				appendToBody="true" closeOnEscape="true"
				widgetVar="confirmDeleteNode">

				<f:facet name="message">
					<h:outputText escape="false"
						value="#{messages.UI_CONFIRM_DELETE_NODE}" />
				</f:facet>

				<p:button value="#{messages.DIALOG_YES}"
					onclick="confirmDeleteNode.hide();nodeGraph.onSelectedNodeDeleted();return false;" />
				<p:button value="#{messages.DIALOG_NO}"
					onclick="confirmDeleteNode.hide();return false;" />
			</p:confirmDialog>
		</h:form>

		<dialogs:findSensorDialog id="findSensorDialog" />
		<dialogs:editVariableDialog id="editVariableDialog" />
		<dialogs:newApplicationDialog id="newApplicationDialog" />
		<dialogs:editGroupsDialog id="editGroupsDialog" />
		<dialogs:importApplicationsDialog id="importApplicationsDialog" />

		<h:form>
			<p:remoteCommand
				rendered="#{empty applicationDesignPageController.context.appManager}"
				name="loadApplications" autoRun="true"
				actionListener="#{applicationDesignPageController.reloadApplications()}"
				process="@this"
				update=":consoleForm, :nodeGraphForm :toolboxForm, :propertyGridForm, :menubar"
				onstart="windowBlockUI.block();"
				oncomplete="windowBlockUI.unblock();" />
		</h:form>

	</h:body>

</f:view>
</html>

